<template>
  <div class="bg-sci-bo pb-90px" @click="closeModal">
    <div class="fixed top-0 bg-#2e3036 pb-16px">
      <div class="sci-bo-top w-100vw py-9px px-9px flex items-center justify-center relative">
        <img
          src=""
          class="w-19px h-19px absolute left-16px" alt="">
        <p class="text-16px text='[#ffcdaa]' font-DIN' p-0 m-0">{{ roomNum }}</p>
        <img
          src=""
          class="w-26px h-26px absolute right-16px" @click.stop="showMenuBox = true" alt="">
      </div>
      <BarBox @clickAllBtn="showRecentPop = true" />
    </div>
    <div class="pt-86px overflow-y-scroll">
      <div class="w-375px h-310px gamebox relative">
        <div ref="canvasContainer" class="w-100vw h-310px" id="canvas"></div>
        <div v-if="showOverRes" class="w-375px h-310px absolute  top-0 left-0 game-over-box ">
          <div class="w-200px h-24.5px mx-auto mt-50px mb-20px  over-title"></div>
          <div class="flex text-12px font-bold">
            <div class="flex-1 slide-in-left">
              <div class="flex item-center justify-center h-35px" v-for="(item, index) in evenIndexedArray">
                <div v-if="index == 0" class="max-w-60px min-w-45px mr-10px color-#ead043 text-14px mb-4px">Champion</div>
                <div v-else class="max-w-60px min-w-45px"> NO.{{ index * 2 + 1 }} </div>
                <img class="w-28px h-20px block mr-10px" :src="'../../../src/assets/pk-10/car' + (item + 1) + '.png'"
                  alt="">
                <div>{{ formatNumber(item + 1) }}</div>
              </div>
            </div>
            <div class="flex-1 slide-in-right">
              <div class="flex item-center justify-center  h-35px" v-for="(item, index) in oddIndexedArray">
                <div v-if="index == 0" class="max-w-60px min-w-45px mr-10px color-#ea9743 text-14px mb-4px">Runner-up
                </div>
                <div v-else class="max-w-60px min-w-45px"> NO.{{ index * 2 + 2 }} </div>
                <img class="w-28px h-20px block mr-10px" :src="'../../../src/assets/pk-10/car' + (item + 1) + '.png'"
                  alt="">
                <div>{{ formatNumber(item + 1) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <BattingBox />
    </div>
    <ControlBox />
    <MenuBox v-if="showMenuBox" />
    <RecentPop @closed="showRecentPop = false" :show="showRecentPop" />
  </div>
</template>

<script setup lang="ts">
import PixiEngine from "./systems/engine";
import BarBox from "./components/barBox.vue";
import ControlBox from "./components/controlBox.vue";
import BattingBox from "./components/bettingBox.vue"
import MenuBox from "./components/menuBox.vue"
import RecentPop from "./components/recentPop.vue"

const showRecentPop = ref(false)
const canvasContainer = ref(null);
const roomNum = ref<string>('PK 10');
const showOverRes = ref<boolean>(true);
const gameResult = ref([2, 0, 1, 3, 7, 5, 6, 4, 8, 9]);
const showMenuBox = ref<boolean>(false);

const closeModal = () => {
  if (showMenuBox.value == true) {
    showMenuBox.value = false
  }
}

const evenIndexedArray = computed(() => gameResult.value.filter((_element, index) => {
  return index % 2 === 0;
}))
const oddIndexedArray = computed(() => gameResult.value.filter((_element, index) => {
  return index % 2 !== 0;
}))

const formatNumber = (num: number): string => {
  return num >= 1 && num <= 9 ? `0${num}` : num.toString();
};

onMounted(() => {
  const width = canvasContainer.value.offsetWidth;
  const height = canvasContainer.value.offsetHeight;
  let PixiEngineObj = new PixiEngine(width, height);
  const canvasInfo = PixiEngineObj.getCanvas();
  document.querySelector("#canvas")!.appendChild(canvasInfo as unknown as Node);
})
</script>
<style lang="less" scoped>
.gamebox {
  // background: url('~/sic-bo/slot-machines-bg1.png') no-repeat top left / 100% 100%;
}

.slide-in-left {
  animation: slideInFromLeft 0.5s ease-out forwards;
  /* 动画名称，持续时间，缓动函数，填充模式 */
}

.slide-in-right {
  animation: slideInFromRight 0.5s ease-out forwards;
  /* 动画名称，持续时间，缓动函数，填充模式 */

}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    /* 开始时元素在左侧不可见 */
    opacity: 0;
    /* 可以添加一个淡入效果 */
  }

  to {
    transform: translateX(0);
    /* 动画结束时元素回到原位 */
    opacity: 1;
    /* 完全可见 */
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    /* 开始时元素在左侧不可见 */
    opacity: 0;
    /* 可以添加一个淡入效果 */
  }

  to {
    transform: translateX(0);
    /* 动画结束时元素回到原位 */
    opacity: 1;
    /* 完全可见 */
  }
}

.over-title {
  background: url('~/pk-10/text-finish.png') no-repeat top left / 100% 100%;
}

.game-over-box {
  // background-color: rgba(0, 0, 0, 0.5);
}

#canvas {
  overflow: hidden;

  canvas {
    // width: 100vw;
  }
}

.bg-sci-bo {
  background: #2e3036;
  width: 100vw;
  height: 100%;
  position: relative;
}

.sci-bo-top {
  color: #fff;
}
</style>
